<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理员功能界面</title>
<style>
body {
	
}

.tab {
	width: 1200px;
	height: 575px;
	margin: 112px auto; /*外边距 上下 左右*/
}

.text {
	float: left; /*浮动 让元素具有块元素性质*/
	/*display:block;航元素转块元素*/
	width: 300px;
	/*背景-复合写法*/
	background: url(img/bg1.png) no-repeat /*背景重复*/ center;
	color: #ffffff;
	text-decoration: none;
	text-align: center; /*文本水平居中*/
	line-height: 75px; /*文本垂直居中*/
	font-family: "楷体";
	font-size: 20px; /*字体大小,默认16px,用户看起来最舒服12px*/
	font-weight: bold; /*字体粗细*/
}

.picture {
	height: 575px;
	background-image: url(img/1.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: 5s; /*过渡*/
}
/* ~ 指代兄弟关系 :hover鼠标悬停（移入）text改变picture样式*/
.text:hover {
	background-image: url(img/bg2.png);
	color: #fcc63d;
}

.text:nth-child(2):hover ~ .picture {
	background-image: url(img/2.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.text:nth-child(3):hover ~ .picture {
	background-image: url(img/4.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.text:nth-child(4):hover ~ .picture {
	background-image: url(img/3.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
</style>
</head>
<body>

	<!-- 存放给用户看的内容 
			a标签是行内元素  div是块元素-->
	<div class="tab">
		<a class="text" href="all_zq.jsp">查看灾情</a> 
		<a class="text" href="all_ck.jsp">查看所有仓库</a> 
		<a class="text" href="chakan_user.jsp">查看所有用户</a> 
	<a class="text" href="chakan_qy.jsp">查看所有企业</a> 
		<div class="picture"></div>
	</div>

</body>
</html>